import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:furaha_mkopo/commonTool/fm_color_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_jump_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_language_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_screen_tool.dart';
import 'package:furaha_mkopo/commonUI/fm_bottom_button.dart';
import 'package:furaha_mkopo/commonUI/fm_custon_nav_bar_widget.dart';
import 'package:furaha_mkopo/manager/fm_init_manager.dart';
import 'package:geolocator_platform_interface/src/models/position.dart';
import 'package:get/get.dart';
import '../base/fm_base_page_widget.dart';
import 'fm_login_controller.dart';

class FMLoginPage extends FMBasePageWidget {
  const FMLoginPage({super.key});

  @override
  State<FMLoginPage> createState() => _FMLoginPageState();
}

class _FMLoginPageState extends FMBasePageState<FMLoginPage> {

  final controller = Get.put(FMLoginController());

  @override
  void initState() {
    super.initState();
    controller.context = context;
  }

  @override
  void dispose() {
    Get.delete<FMLoginController>();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: (){
          FocusScope.of(context).unfocus();
        },
        child: Container(
          color: FMColorTool.color("#D1FFCA"),
          child: Stack(
            children: [
              _bgImageWidget(),
              _navBarWidget(),
              _contentWidget(),
              _loginWidget(),
              _privacyWidget(),
            ],
          ),
        ),
      ),
    );
  }
  
  Widget _bgImageWidget() {
    return Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: Image.asset(FMLanguageTool.getAssets("assets/login/login_bg"))
    );
  }
  
  Widget _navBarWidget() {
    return Positioned(
      top: FMScreenTool.topPadding(context),
      left: 0,
      right: 0,
      child: const FMCustomNavBarWidget(title: "LOGIN")
    );
  }

  Widget _contentWidget() {
    return Positioned(
      top: 200 + FMScreenTool.topPadding(context),
      left: 16,
      right: 16,
      child: Container(
        height: 244,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16)
        ),
        child: Column(
          children: [
            const SizedBox(height: 31),
            _phoneWidget(),
            const SizedBox(height: 18),
            _codeWidget(),
          ],
        ),
      ),
    );
  }

  Widget _phoneWidget() {
    return Padding(
      padding: const EdgeInsets.only(left: 20,right: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            FMLanguageTool.getText("Phone number"),
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: FMColorTool.blackColor,
              decoration: TextDecoration.none
            ),
          ),
          const SizedBox(height: 10),
          Container(
            height: 53,
            decoration: BoxDecoration(
              borderRadius:BorderRadius.circular(10),
              color: FMColorTool.color("#D1FFCA"),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 16,right: 0),
              child: Row(
                children: [
                  Text(
                    '(+225)',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      color: FMColorTool.blackColor,
                      decoration: TextDecoration.none
                    ),
                  ),
                  const SizedBox(width: 6.5),
                  Container(
                    color: FMColorTool.color("#000000").withOpacity(0.12),
                    height: 29,
                    width: 1,
                  ),
                  const SizedBox(width: 8.5),
                  Expanded(
                    child: TextField(
                        controller: controller.phoneController,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          contentPadding: const EdgeInsets.symmetric(vertical:0),
                          hintText: FMLanguageTool.getText("Please enter your phone number"),
                          hintStyle: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 14,
                              color: FMColorTool.color("#333333").withOpacity(0.6)
                          ),
                          border: const OutlineInputBorder(
                              borderSide: BorderSide.none
                          ),
                          filled: false,
                        )
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _codeWidget() {
    return GetBuilder<FMLoginController>(
      id: "updateAnimation",
      builder: (controller) {
      return Padding(
        padding: const EdgeInsets.only(left: 20,right: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              FMLanguageTool.getText("Verification code"),
              style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: FMColorTool.blackColor,
                  decoration: TextDecoration.none
              ),
            ),
            const SizedBox(height: 10),
            Transform.translate(
              offset: Offset(controller.animation.value, 0),
              child: Container(
                padding: const EdgeInsets.only(left: 16,right: 16),
                height: 53,
                decoration: BoxDecoration(
                  borderRadius:BorderRadius.circular(10),
                  color: FMColorTool.color("#D1FFCA"),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: TextField(
                          focusNode: controller.focusNode,
                          controller: controller.codeController,
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                            contentPadding: const EdgeInsets.symmetric(vertical:0),
                            hintText: FMLanguageTool.getText("Verification code"),
                            hintStyle: TextStyle(
                                fontWeight: FontWeight.w500,
                                fontSize: 14,
                                color: FMColorTool.color("#333333").withOpacity(0.6)
                            ),
                            border: const OutlineInputBorder(
                                borderSide: BorderSide.none
                            ),
                            filled: false,
                          )
                      ),
                    ),
                    GetBuilder<FMLoginController>(
                        id: "updateTime",
                        builder: (controller){
                          return Container(
                            width: 162,
                            alignment: Alignment.centerRight,
                            height: 53,
                            child: GestureDetector(
                              onTap: (){
                                controller.sendCode();
                              },
                              child: Text(
                                controller.codeTitle(),
                                maxLines: 1,
                                textAlign: TextAlign.end,
                                style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: FMColorTool.color("#158F05")
                                ),
                              ),
                            ),
                          );
                        })
                  ],
                ),
              ),
            )
          ],
        ),
      );
    });
  }
  
  Widget _loginWidget() {
    return Positioned(
      top: 176 + FMScreenTool.topPadding(context) + 244 + 43,
      left: 38,
      right: 38,
      child: FMBottomButton(
        title: FMLanguageTool.getText("Login"),
        onTap: (){
           controller.clickLogin();
        },
      ),
    );
  }

  Widget _privacyWidget() {
      return GetBuilder<FMLoginController>(
        id: "updateRadio",
        builder: (controller){
          return Positioned(
            top: 176 + FMScreenTool.topPadding(context) + 244 + 43 + 46 + 12,
            left: 38,
            right: 38,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GestureDetector(
                  onTap: (){
                    controller.clickRadio();
                  },
                  child: Image.asset(controller.isRadioSelected ? "assets/login/login_selected.png" : "assets/login/login_unSelected.png",width: 16,height: 16,)
                ),
                const SizedBox(width: 6),
                Text(
                  FMLanguageTool.getText("I agree to the"),
                  style: TextStyle(
                    fontSize: 14,
                    color: FMColorTool.color("#6D6D73")
                  ),
                ),
                GestureDetector(
                  onTap: (){
                      String loginProtocol = FMInitManager().loginProtocol;

                      if (loginProtocol.isEmpty) {return;}

                      FMJumpTool.jumpWebWidget(context: context,url: loginProtocol);
                  },
                  child: Text(
                    '  ${FMLanguageTool.getText("<Privacy Policy>")}',
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w700,
                        color: FMColorTool.color("#158F05")
                    ),
                  ),
                )
              ],
            ),
          );
      });
  }

  @override
  void onLocationError(String error) {

  }

  @override
  void onLocationUpdated(Position position) {
    controller.position = position;
  }
}
